<template>
	<uni-nav-bar title="福利发放" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<view class="package_sale" v-if="hexiaoInfo">
		<view class="space-between list" v-for="item in hexiaoInfo.goods_list" :key="item.goods_id">
			<image :src="item.image" mode=""></image>
			<view class="direction-start" style="height:153rpx;justify-content:space-around;width:76%;">
				<view class="title">{{item.name}}</view>
				<view class="space-between" style="width:100%">
					<view v-if="item.type==='gem'" style="font-size: 26rpx;color:#5097FB;">
						蓝宝石
						<text style="font-size: 38rpx;margin-left: 10rpx;">{{item.score}}</text>
					</view>
					<view v-else style="font-size: 26rpx;color:#FE3B2E;">
						钱包价格:<text style="font-size: 24rpx;">￥</text>
						<text style="font-size: 38rpx;margin-left: 10rpx;">{{item.money}}</text>
					</view>
					<view>{{hexiaoInfo.driver_name}}</view>
				</view>
				<view class="space-between" style="width:100%">
					<view></view>
					<view>x{{item.nums}}</view>
				</view>
			</view>
		</view>
		<view class="top">
			<view>拍照</view>
			<mk-upload :imgList="imgList" @onDelete="onDelete" @onChoose="onChoose" :maxCount="1"
				:sourceType="sourceType" />
		</view>
		<view class="top">
			<view>备注</view>
			<textarea class="textarea" v-model="value"></textarea>
		</view>
		<view class="but" @click="submit()">确定</view>
	</view>
	<Watermark ref="watermark" @selected="selected" :title="subtitle"></Watermark>
</template>

<script setup lang="ts">
	import { navBack, redirectTo } from '@/utils/navigator';
	import { ref } from 'vue';
	import Watermark from '@c/watermark.vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { getHexiaoInfo } from '@/gql/earthPushing/order';
	import { errorToast, successToast, showLoading } from '@/utils/prompt';
	import { toPublish, publish } from '@mqtt';
	import { getDriverID } from '@/stores/driverID';
	const staff_id = getDriverID();
	const orderID = ref()
	const hexiaoInfo = ref()
	const sourceType = ["camera"]
	// 上传图片
	const imgList = ref([])
	const image = ref()
	const watermark = ref(null)
	const value = ref('');
	const subtitle = ref('')
	onLoad((pearm) => {
		orderID.value = Number(pearm.id)
		init()
	})
	function init() {
		showLoading()
		const payload = {
			query: getHexiaoInfo,
			variables: {
				order_id: orderID.value,
			},
		};
		toPublish(
			'ql/staff/getHexiaoInfo',
			payload,
			(obj : any) => {
				const { getHexiaoInfo } = obj.data;
				hexiaoInfo.value = getHexiaoInfo
				subtitle.value = getHexiaoInfo.subtitle
			},
		);
	}
	// 上传图片
	function onChoose(e : any) {
		watermark.value.fillTextToImg(e.tempFilePaths[0])
		console.log(e.tempFilePaths[0])
	}
	function selected(e : any) {
		uni.uploadFile({
			url: 'https://admin.anlan.tech/api/common/upload2',
			filePath: e,
			name: 'file',
			formData: {
				'user': 'test'  // 上传附带参数
			},
			success: (uploadFileRes) => {
				// 根据接口具体返回格式   赋值具体对应url
				imgList.value.push(JSON.parse(uploadFileRes.data).data.fullurl)
				image.value = JSON.parse(uploadFileRes.data).data.url
			},
			fail: (err : any) => {
				console.log('err', err)
			}
		});
	}
	// 删除图片
	function onDelete() {
		imgList.value = []
		image.value = ''
	}
	function submit() {
		if (!image.value) {
			errorToast('请上传福利品照片');
			return
		}
		showLoading()
		const payload = {
			staff_id,
			order_id: orderID.value,
			image: image.value,
			des: value.value
		};
		toPublish('score/doHexiao', payload, (obj : any) => {
			const { code, msg } = obj;
			if (code === 1) {
				successToast(msg)
				writeOff()
				setTimeout(() => {
					redirectTo('Sale/Information/orderDetail?id=' + orderID.value)
				}, 1500)
			} else {
				errorToast(msg);
			}
		});
	}
	function writeOff() {
		const payload = {
			type: 'success',
		};
		const topic = 'formal/v1/integral/Verification/client/' + orderID.value
		publish(topic, payload)
	}
</script>

<style scoped lang="less">
	.list {
		width: 100%;
		padding-bottom: 20rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;

		image {
			width: 153rpx;
			height: 153rpx;
			border-radius: 5px;
		}
	}

	.top {
		margin-top: 20rpx;
	}

	.textarea {
		background-color: #eee;
		border-radius: 5px;
		margin-top: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		height: 150rpx;
	}

	.but {
		width: 360rpx;
		height: 98rpx;
		background: #558AF1;
		border-radius: 5px;
		color: #fff;
		text-align: center;
		line-height: 98rpx;
		margin: 80rpx auto 30rpx;
	}

	.title {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
<style>
	.top>>>.checklist-box {
		margin-right: 0px;
	}

	.top>>>.uni-data-checklist {
		flex: none;
	}

	.package_sale>>>.mk-upload {
		padding: 0px;
	}

	.top>>>.textarea {
		width: 100%;
	}
</style>